@use '../../design-system' as *;

.slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-size-4 0;

    @media screen and (min-width: $breakpoint-automated-row-grouping-medium) {
        flex-direction: row;
    }

    label {
        width: 8.6em;
    }

    input[type='range'] {
        min-width: 12em;
        margin-left: 0;

        @media screen and (min-width: $breakpoint-automated-row-grouping-medium) {
            margin-left: $spacing-size-2;
            min-width: 8em;
        }

        @media screen and (min-width: $breakpoint-automated-row-grouping-large) {
            min-width: 14em;
        }
    }
}
